<template>

<div>
  <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave" v-if="list.length > 0">
     <div class="mb-[10px] page"      element-loading-text="加载中..."  style="min-height: 500px;" >
       <div style="margin-top: 10px;" v-for="(item,index) in  list">
          <el-card shadow="hover">
             <AccItem :item="item" @flushAccount="flushAccount"></AccItem>
          </el-card>
        </div>

        <!--
        <div style="margin-top: 10px;">
          <el-card shadow="hover">
             <AccItem></AccItem>
          </el-card>
        </div>-->
     </div>
   </transition>
   <el-empty description="暂无账户数据" v-if="list.length == 0"/>
</div>

</template>

<script lang="ts"   setup>
import { merchantAccount, merchantAccountDetail,sydAccount,sydAccountDetail } from '@/api/account/balance/index';
import { getTaskList } from '@/api/projectMgt/index';
import { to } from 'await-to-js';
import AccItem from "@/components/accItem/accItem.vue";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import useUserStore from '@/store/modules/user'

const isLoading = ref(false)
const list = ref([]);
const userRole = ref(0);


  /**
    * 查询账户列表
    */
   const getList = () => {
     const loadingInstance1 = ElLoading.service({fullscreen: false , target:'.page' })
     isLoading.value = true;
     if(userRole.value == 6){
       //服务商
       sydAccount({}).then(res => {
         list.value = res.rows
       }).finally(()=>{
         isLoading.value= false;
         loadingInstance1.close();
       })
     }else if(userRole.value == 9){
       //商户
       merchantAccount({}).then(res => {
         list.value = res.rows
       }).finally(()=>{
         isLoading.value= false;
         loadingInstance1.close();
       })
     }else{
        isLoading.value= false;
        loadingInstance1.close();
     }

   }



   //刷新余额
    const flushAccount = (item:any)=>{
       const elLoading = ElLoading.service({ fullscreen: false ,target:'.page'});
       if(userRole.value == 6){
         //服务商
         sydAccountDetail(item.item.id).then(res=>{
           let data = res.data;
           let i = 0 ;
           for( let l of list.value){
               if(l.id == data.id){
                  data.accName = list.value[i].accName;
                   list.value[i] = data;
                   break;
               }
               i++;
           }}).finally(()=>{
         elLoading.close();
       });
       }else if(userRole.value == 9){
         //商户
        merchantAccountDetail(item.item.id).then(res=>{
          let data = res.data;
          let i = 0 ;
          for( let l of list.value){
              if(l.id == data.id){
                  data.accName = list.value[i].accName;
                  list.value[i] = data;
                  break;
              }
              i++;
          }}).finally(()=>{
         elLoading.close();
       });
       }
    }



   onMounted(() => {
     let curRoleId = useUserStore().curRoleId;
     userRole.value = curRoleId;
      getList();
    });



</script>
<style scoped>
.banlance-card {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .money-text {
      font-size: 24px;
      color: #333;
  }
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
